<template>
  <view class="container">
    <IWaterfallFlow ref="waterfallFlowRef">
      <template #default="{ row }">
        <view class="good_row">
          <image class="img-tip" :src="row.imgUrl" mode="widthFix" lazy-load />
          <view class="tit-tip ellipsis_2">{{ row.title }}</view>
          <view class="desc-tip ellipsis_2">{{ row.desc }}</view>
        </view>
      </template>
    </IWaterfallFlow>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import IWaterfallFlow from '@/components/container/IWaterfallFlow.vue';
const waterfallFlowRef = ref();
const init = (list: any[]) => {
  waterfallFlowRef.value.init(list.map((item: any) => ({ imgUrl: item.skuImage, title: item.goodsName, desc: item.skuName })));
};
defineExpose({
  init
});
</script>

<style scoped lang="scss">
.container {
  padding: 0 10px;
}
.good_row {
  width: 100%;
  padding-bottom: 20rpx;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
  .img-tip {
    width: 100%;
    border-radius: 12rpx 12rpx 0 0;
  }
  .tit-tip {
    text-align: justify;
    font-size: 30rpx;
    padding: 10rpx 20rpx 0;
    font-weight: 900;
  }
  .desc-tip {
    text-align: justify;
    font-size: 26rpx;
    padding: 5rpx 20rpx 0;
    margin-top: 10rpx;
  }
}
</style>
